<template>
	<view>
		<com-nav v-model="orderStatus" :list="list"></com-nav>

		<!-- <view class="bg-white padding flex" v-for="v in tableData" @click="goto('/pages/my/order/index?orderId=' + v.orderId)"> -->
		<view class="bg-white padding flex" style="flex-wrap: nowrap;" v-for="v in tableData">
			<view class="img1">
				<!-- <image class="img1" :src="config.url + '/wx/zcb/24.png'"></image> -->
				<image class="img1" :src="config.url + '/lsqApi' + v.imagePath"></image>

			</view>
			<view class="margin-left">
				<text class="text-sm text-gray">订单号：{{v.oderId}}</text>
				<view class="margin-top-xs text-bold text-ellipsis">{{v.goodsName || ""}}</view>
				<view class="margin-top-xs text-gray">{{v.ms}}</view>
				<view class="margin-top">数量：{{v.goodsCount}}</view>
				<view class="text-lg text-red text-bold margin-top">￥{{v.goodsPrice}}</view>
			</view>
			<view style="align-self: center; width: 180rpx;" v-if="v.status == 1">
				<button class="cu-btn bg-orange" style="text-wrap: nowrap;" @click="qrCodeClick(v)">核销码</button>
			</view>
		</view>
		
		<view class="cu-modal" :class="modalName=='Modal'?'show':''" v-if="modalName=='Modal'">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">核销码</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<yz-qr :qrPath.sync="qrPath" :text="text" :size="size" :quality="quality" :colorDark="colorDark"
						:colorLight="colorLight"></yz-qr>
				</view>
			</view>
		</view>
		<!-- <u-button @click="show = true">打开</u-button> -->


	</view>
</template>

<script>
	import orderApi from "../../../api/new/orderApi"
	import comNav from "../../../components/comNav.vue"
	import config from "../../../config"
	import yzQr from "@/components/yz-qr/yz-qr.vue"
	export default {
		components: {
			comNav
		},
		data() {
			return {
				config: config,
				list: ["全部订单", "未发货", "已发货", "已完成"],
				tableData: "",
				showModal: false,
				modalName: "",
				qrPath: "https://dreamseeker.space/lsqBackWeb/#/orderCancellation",
				text: "https://dreamseeker.space/lsqBackWeb/#/orderCancellation",
				colorDark: '#000000',
				colorLight: '#ffffff',
				orderStatus: 0
			}
		},
		watch: {
			orderStatus() {
				this.getOrderList()
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			init() {
				this.getOrderList()
			},
			getOrderList() {
				orderApi.orderList({status: this.orderStatus || ""}).then(res => {
					this.tableData = res.rows
				})
			},
			hideModal() {
				this.modalName = ""
			},
			qrCodeClick(row) {
				this.modalName = "Modal"
				console.log("row", row)
				this.text = config.backUrl + row.oderId
			}
		}
	}
</script>

<style lang="scss">
	.a {}

	.img1 {
		width: 194rpx;
		height: 170rpx;
		// border: 1px solid red;
	}
</style>